<template lang="pug">
.view.cp-product-man-trace.fix-flex-pos
  //- 查询
  el-form.te-search(:inline="true")
    el-form-item(label="产品 : ")
      el-select(v-model="productName", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in productSelect",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="关键字 : ")
      el-input(v-model="productKey", placeholder="输入ID/标题", style="width: 160px")
    el-form-item(label="状态 : ")
      el-select(v-model="productStatus", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in statusSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="Traced From")
      el-select(v-model="productFromNode", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in productLevelSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="To")
      el-select(v-model="productToNode", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in productLevelSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-button(type="primary", @click="searchTrace") 搜索
    el-button(type="primary", @click="resetSearch", plain) 重置
  .te-tree(v-loading="treeLoading")
    el-tree(:data="tree", :props="defaultProps", :default-expand-all="true")
      .custom-tree(slot-scope="{ node, data }")
        p
          span(:class="{ active: data.active }") {{ `${data.icon} ${data.id} ${data.title}` }}
          el-select(v-model="data.caseValue", style="width: 120px", v-show="data.caseList")
            el-option(
              v-for="item in data.caseList",
              :key="item.value",
              :label="item.name",
              :value="item.value")
</template>

<script>
import { mapGetters } from 'vuex';
import ComApi from '@/api/common';
import ProductData from '@/data/product';

export default {
  name: 'protrace',
  data() {
    return {
      // search block
      productName: null,
      productKey: null,
      productStatus: null,
      productFromNode: null,
      productToNode: null,
      statusSelectAll: [],
      // tree block
      treeLoading: true,
      tree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  computed: {
    ...mapGetters([
      'productSelect',
      'productLevelSelectAll'
    ])
  },
  methods: {
    resetSearch () {
      this.productName = null;
      this.productKey = null;
      this.productStatus = null;
      this.productFromNode = null;
      this.productToNode = null;
    },
    searchTrace () {
      this.treeLoading = true;
      setTimeout(() => {
        this.tree = ProductData.productTrace;
        this.treeLoading = false;
      }, 1000);
    }
  },
  watch: {
    productSelect () {
      if (this.productSelect.length) {
        this.productName = this.productSelect[0].value;
        // TODO GET TraceInfo
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
    // 状态列表
    ComApi.getStatus({ orderType: 'productneed' }).then((statusList) => {
      this.statusSelectAll = [{ name: '全部', value: null }].concat(statusList);
    });
  },
  mounted () {
    setTimeout(() => {
      this.tree = ProductData.productTrace;
      this.treeLoading = false;
    }, 1000);
  }
};
</script>

<style lang="sass">
$SEARCHHEIGHT: 56px
$GAPWIDTH: 16px
.cp-product-man-trace
  .te-search
    height: $SEARCHHEIGHT
    overflow-x: auto
    overflow-y: hidden
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      padding-right: 6px
  .te-tree
    position: absolute
    padding: $GAPWIDTH
    top: $SEARCHHEIGHT
    left: $GAPWIDTH
    right: $GAPWIDTH
    bottom: $GAPWIDTH
    background-color: white
    overflow: auto
    .custom-tree
      font-size: 14px
    .el-tree-node__content
      height: 32px
    .active
      color: #5D9BFB
    .el-select
      margin-left: 48px
</style>
